<template>
    <div class="vipcenter">
        <Header v-bind:isBack="isBack" v-bind:title="title"></Header>
        <div class="top padding-24">
            <div class="bg-active notvip flex-column" v-if="isvip==2">
                <div >
                    <p class="fs-32 color-f">VIP会员</p>
                    <p class="fs-24 color-f5">尊享VIP会员特权</p>
                </div>
                <div class="bg-f center fs-32" @click="gotoopenvip(2)">立即开通</div>
            </div>
            <div class="bg-active isvip flex-column" v-else>
                <div class="vip-info center-col">
                    <img :src="vipinfo.user_avator" alt="">
                    <div class="flex-column">
                        <p class="fs-32 color-f5">{{vipinfo.nickname}}</p>
                        <p class="fs-24 color-f5">{{vipinfo.vip_end_time}}到期</p>
                    </div>
                </div>
                <div class="vip-num space-around">
                    <div class="cell">
                        <p class="fs-36 color-f">{{vipinfo.this_year_update_num}}</p>
                        <p class="fs-26 color-f5">本月下载</p>
                    </div>
                    <div class="cell">
                        <p class="fs-36 color-f">{{vipinfo.membership_music_num}}<span class="fs-24">首</span></p>
                        <p class="fs-26 color-f5">会员曲库</p>
                    </div>
                    <div class="cell">
                        <p class="fs-36 color-f">{{vipinfo.welfare_vouchers_num}}</p>
                        <p class="fs-26 color-f5">福利券</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="vip-privilege  bg-f">
            <p class="title fs-32 padding-24">VIP特权</p>
            <div class="privilege-list flex wrap">
                <div class="list-item" v-for="(item,index) in privilegelist" :key="index">
                    <div class="bg-e yuan">
                        <img :src="item.photo" alt="" v-if="item.photo">
                    </div>
                    <p class="fs-26 color-6  overFlow">{{item.name}}</p>
                </div>
            </div>
        </div>
        <div class="vip-welfare bg-f padding-24">
            <p class="title fs-32">会员福利券</p>
            <div class="banner">
                <swiper :options="swiperOption" class="swiper" v-if="welfarelist.length > 0">
                    <swiper-slide v-for="(item,index) in welfarelist" :key="index">
                        <div class="item" @click="show(item)">
                            <img :src="item.cover" alt class="imgList" />
                            <p class="overFlow">{{item.name}}</p>
                        </div>
                        
                    </swiper-slide>
                </swiper>
            </div>
        </div>
        <div class="vip-songlist bg-f">
            <p class="title fs-32 padding-24">会员精选歌单</p>
            <div class="song-list flex wrap">
                <div class="list-item" v-for="(item,index) in songlist" :key="index">
                    <div class="tops">
                        <img :src="item.song_sheet_photo" alt="" class="cove">
                        <div class="headset center-col">
                            <img :src="headset" alt="">
                            <p class="color-f fs-24">{{item.run_num}}</p>
                        </div>
                    </div>
                    <div class="song-name overFlow-2">{{item.song_sheet_name}}</div>
                </div>
            </div>
        </div>
        <div class="btn padding-24">
            <div class="bg-p center color-f fs-32" v-if="isvip==1" @click="gotoopenvip(1)">续费</div>
            <div class="bg-p center color-f fs-32" v-else @click="gotoopenvip(2)">开通</div>
        </div>
        <div class="welfare-detail" v-if="showdetail">
            <div class="bg-f details">
                <div class="space-between padding-24 tops">
                    <p class="title fs-36">{{welfare.name}}</p>
                    <img :src="del" alt="" @click="showdetail=false">
                </div>
                <div class="contents padding-24">
                    <img :src="welfare.cover" alt="" class="cover">
                    <div v-html="welfare.content"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'会员中心',
            isvip:2,
            headset:require("../../assets/account/headset.png"),
            del:require("../../assets/account/del.png"),
            vipinfo:'',
            privilegelist:[],
            welfarelist:[],
            songlist:[],
            showdetail:false,
            welfare:'',
            swiperOption: {
                // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // 循环
                loop: false,
                // 设定初始化时slide的索引
                initialSlide: 0,
                // 滑动速度
                speed:300,
                // 滑动方向
                loopedSlides :1,
                direction: 'horizontal',
                // 小手掌抓取滑动
                grabCursor: true,
                slidesPerView: 'auto',
                on: {
                // 滑动之后回调函数
                slideChangeTransitionStart: function () {
                    /* realIndex为滚动到当前的slide索引值 */
                    this.imgIndex = this.realIndex - 1
                }
                },
                
            },
        }
    },
    created(){
        this.getvipinfo()
    },
    methods:{
        getvipinfo(){
            var url = this.$host1 + `home/vip/membershipCenter`;
            this.$axios.get(url).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.isvip=resData.data.is_vip
                    this.vipinfo=resData.data.top
                    this.privilegelist=resData.data.vip_privileges
                    this.welfarelist=resData.data.vip_coupon
                    this.songlist=resData.data.song_sheet
                } else if(resData.code == 0){
                    // this.$router.push('/login');
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gotoopenvip(i){
            this.$router.push({
                path: '/openvip',
                query: {
                    type: i,
                }
            })
        },
        show(i){
            this.welfare=i
            this.showdetail=true
        }
    }
}
</script>
<style lang="scss" scoped>
.vipcenter{
    .top{
        height: 3.8rem;
        padding: 0.2rem 0.24rem;
        margin-top: 1rem;
        .bg-active{
            width: 100%;
            height: 100%;
            border-radius: 0.2rem;
        }
        .notvip{
            padding: 0.45rem 0.55rem;
            box-sizing: border-box;
            .center{
                width: 2.1rem;
                height: 0.58rem;
                border-radius: 0.29rem;
            }
        }
        .isvip{
            padding: 0.38rem 0.4rem;
            box-sizing: border-box;
            .vip-info{
                width: 100%;
                height: 0.88rem;
                img{
                    width: 0.88rem;
                    height: 0.88rem;
                    border-radius: 50%;
                    margin-right: 0.3rem;
                }
                div{
                    height: 0.88rem;
                }
            }
            .vip-num{
                .cell{
                    text-align: center;
                }
            }
        }
    }
    .vip-privilege{
        height: auto;
        .title{
            font-weight: bold;
            line-height: 1rem;
        }
        .privilege-list{
            height: auto;
            .list-item{
                width: 20%;
                text-align: center;
                margin-bottom: 0.3rem;
                //margin:0 0.24rem 0.2rem;
                .bg-e{
                    width: 1rem;
                    height: 1rem;
                    margin: 0 auto;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;

                    }
                }
                .overFlow{
                    margin: 0 auto;
                    line-height: 0.5rem;
                    width: 90%;
                    //background-color: grey
                }
            }
        }
    }
    .vip-welfare{
        margin-top: 0.2rem;
        .title{
            line-height: 1rem;
            font-weight: bold;
        }
        .banner{
            width: 100%;
            height: 2.5rem;
            .swiper{
                width: 100%;
                height: 2.3rem;
                .swiper-slide{
                    width:3rem !important;
                    margin-right:0.2rem;
                }
                .swiper-slide:last-child{
                    margin-right: 0!important;
                }
                .item{
                    //background-color: greenyellow;
                    width: 3rem;
                    height: 2.3rem;
                    img{
                        width: 3rem;
                        height: 1.76rem;
                        border-radius: 0.12rem
                    }
                    p{
                        line-height: 0.5rem
                    }
                }
            }
            
        }
    }
    .vip-songlist{
        margin-top: 0.2rem;
        .title{
            line-height: 1rem;
            font-weight: bold;
        }
        .song-list{
            width: 100%;
            height: auto;
            .list-item{
                width: 33.3%;
                height: 3rem;
                margin-bottom: 0.3rem;
                //background-color: greenyellow;
                .tops{
                    width: 2.2rem;
                    height: 2.2rem;
                    margin: 0 auto;
                    position: relative;
                    .cove{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    .headset{
                        width: auto;
                        height: 0.3rem;
                        position: absolute;
                        right: 0.15rem;
                        top: 0.2rem;
                        img{
                            width: 0.3rem;
                            height: 0.2rem;
                            margin-right: 0.1rem;
                        }
                    }
                }
                .song-name{
                    width: 2.2rem;
                    margin: 0.1rem auto 0;
                    // padding: 0.1rem 0;
                    // box-sizing: border-box;
                    height: 0.8rem;
                    line-height: 0.4rem;
                    overflow: hidden;
                }
            }
        }
    }
    .btn{
        height: 0.9rem;
        margin: 0.6rem auto 2rem;
        div{
            width: 100%;
            height: 100%;
            border-radius: 0.45rem;
            letter-spacing: 0.2rem;
        }
    }
    .welfare-detail{
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        .details{
            width: 100%;
            height: 9rem;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 0.15rem 0.15rem 0 0;
            .tops{
                height: auto;
                min-height: 1rem;
                border-bottom: 0.01rem solid #e9e9e9;
                padding: 0.2rem 0.24rem;
                p{
                    line-height: 0.4rem;
                    width: 6rem;
                }
                img{
                    width: 0.36rem;
                    height: 0.36rem;
                }
            }
            .contents{
                padding: 0.2rem 0.24rem;
                height: calc(100% - 1rem);
                overflow-y: scroll;
                //background-color: greenyellow;
                .cover{
                    width: 100%;
                    height: 2rem;
                    border-radius: 0.15rem;
                    //object-fit: cover;
                }
                div{
                    margin-top: 0.2rem;
                    img{
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                    }
                }
            }
        }
    }
}
</style>